<template>
	<view class="f32">
		<view class="df jsb ac h90">
			<view class="w30 df ac">
				<imageIcon :value="icon" v-if="icon"></imageIcon>
				<view class="ml10">{{ title }}</view>
			</view>
			<view class="w70 df jse ac">
				<view
					class="w50 text-over tr f28"
					v-if="dataList && dataList.length < 3"
				>
					<template>
						<text
							class="mr10"
							v-for="(item, index) in dataList"
							:key="index"
							>{{ item.userName }}</text
						>
					</template>
				</view>
				<button
					class="primary-button small-linear ml20 mr0"
					@tap="clickEmit()"
					v-if="showBtn"
				>
					添加成员
				</button>
			</view>
		</view>
		<view
			class="df flex-wrap pl44 f28"
			v-if="dataList && dataList.length && dataList.length > 2"
		>
			<template v-for="(item, index) in dataList">
				<view
					class="mb20 mr10 lh33"
					:key="index"
					v-if="showAll || (!showAll && index < 9)"
				>
					{{ item.userName
					}}{{
						(dataList.length > 9 && !showAll && index < 8) ||
						(showAll && index + 1 < dataList.length) ||
						(!showAll &&
							dataList.length < 10 &&
							index + 1 < dataList.length)
							? ','
							: ''
					}}
				</view>
			</template>
			<view class="mb20 mr10 lh33 df" v-if="dataList.length > 9">
				<view v-if="!showAll">等{{ dataList.length }}人</view>
				<view class="ml10 primary-color df ac" @tap="showAllList">
					{{ showAll ? '收起' : '查看全部' }}
					<imageIcon
						:value="rightIcon"
						width="12rpx"
						height="24rpx"
						class="ml6"
						style="padding-bottom: 2rpx"
					></imageIcon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import imageIcon from '@/subPackagesLog/pages/workLog/components/imageIcon.vue'
import rightIcon from '@/subPackagesLog/pages/workLog/icon/vector.png'
export default {
	emits: ['click'],
	components: {
		imageIcon,
	},
	props: {
		icon: {
			type: String,
			default: '',
		},
		title: {
			type: String,
			default: '可见成员',
		},
		localdata: {
			type: Array,
			default() {
				return []
			},
		},
		showBtn: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			rightIcon,
			userId: uni.getStorageSync('userId'),
			dataList: [],
			showAll: false,
		}
	},
	mounted() {
		this.userId = uni.getStorageSync('userId')
		this.dataList = this.localdata
	},
	methods: {
		//按钮点击
		clickEmit() {
			this.$emit('click')
		},
		//显示全部
		showAllList() {
			this.showAll = !this.showAll
		},
	},
	watch: {
		localdata: {
			immediate: true,
			handler(val, old) {
				if (Array.isArray(val) && old !== val) {
					this.dataList = val
				}
			},
		},
	},
}
</script>

<style scoped lang="scss">
.pl44 {
	padding-left: 44rpx;
}
.lh33 {
	line-height: 33rpx;
}
.ml6 {
	margin-left: 6rpx;
}
</style>
